<template>
  <div>
      <div id="box">
				<h2>MicroHR系统登录</h2><br>
				<br><el-input v-model="loginname" placeholder="请输入账号" style="width: 300px;"></el-input><br><br>
				<br><el-input type="password" v-model="pass" placeholder="请输入密码" style="width: 300px;"></el-input><br>
				<br><p style="padding-left:50px"><input type="checkbox" name="remember-me">记住密码</p>
                <br><el-button type="primary" @click="login()" style="width: 300px;">登录</el-button>
		</div>
      
  </div>
</template>

<script>
export default {
    name:"Login",
    data(){
        return{
            loginname:'',
            pass:''
        }
    },
    methods:{
        login(){
            this.$axios.post(
                'login',
                this.$qs.stringify({
                    username:this.loginname,
                    password:this.pass
                })
            ).then((value) => {
                if(value.data.success){   
                    this.$setSessionStorage('user',value.data.data)
                    this.$router.push({path:'/home'})
                }else {
                    this.$message({
                        message:"登录失败，用户名或者密码错误",
                        type:"error"
                    })
                }
            }).catch((value) => {
                console.error(value)
            })
           
        }
    }
}
</script>

<style>
#box{
    padding-top: 24px;
    padding-bottom: 24px;
	margin-top: 150px;
	text-align: center;
	width: 400px;
	height: 300px;
	margin-left: 36vw;
	border:1px solid #BFBFBF;
	box-shadow:0px 0px  10px 5px #aaa;
	border-radius: 20px;
	}
	p{
        text-align: left;
	}
</style>